<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import axios from 'axios';
  import { Stamp } from '@element-plus/icons-vue';

  export default {
    components: { Stamp },
    data() {
      return {
        chartData: [
          { word: '11', pv: 252, ratio: 77, sim: 111, keyword: '测试' },
          { word: '12', pv: 252, ratio: 77, sim: 111, keyword: '测试2' },
          // 更多数据...
        ],
        allData: [
          // { word: "11", pv: 252, ratio: 77, sim: 111, keyword: "测试" },
          // { word: "12", pv: 252, ratio: 77, sim: 111, keyword: "测试2" },
          // // 更多数据...
        ],
        seedword: '',
        keywords: '',
        nodes: [],
      };
    },
    mounted() {
      axios({
        method: 'get',
        url: 'http://127.0.0.1:4523/m1/3571383-0-default/api/baidu/baidu1',
      })
        .then((res) => {
          console.log('请求成功');
          console.log(res);
          this.wordslist = res.data['wordlist'];
          this.seedword = this.wordslist[0]['keyword'];
          this.allData = this.wordslist[0]['wordGraph'];
          // this.allData.push({word: this.seedword, pv: 252, ratio: 77, sim: 111,keyword:"cs"});
          console.log(this.allData);
          this.nodes = this.allData.map((item) => ({ name: item.word, value: item.sim }));
          console.log(this.nodes);
          console.log(this.chartData);
          this.createChart();
        })
        .catch((error) => {
          console.log('请求失败');
          console.log('error');
        });
    },
    methods: {
      createChart() {
        let newDatas = [];
        let newLinks = [];
        for (let i = 0; i < this.allData.length; i++) {
          newDatas.push({
            name: this.allData[i]['word'],
            value: this.allData[i]['sim'],
            symbolSize: this.allData[i]['pv'],
          });
          newLinks.push({ source: this.seedword, target: this.allData[i]['word'] });
        }
        newDatas.push({ name: this.seedword, value: null, symbolSize: 100 });
        const chart = echarts.init(this.$refs.chart);
        const option = {
          title: {
            text: '需求图谱',
          },
          tooltip: {},
          series: [
            {
              type: 'graph',
              layout: 'force',
              force: {
                edgeLength: [200, 400],
              },
              data: newDatas,
              links: newLinks,
            },
          ],
        };
        chart.setOption(option);
      },
    },
  };
</script>

<style>
  .chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .chart {
    width: 1000px;
    height: 600px;
    background-color: #7e9cff;
  }
</style>
